<template>
    <div class="login-box w100 h100">
        <div class="login-box-content bg-fff">
            <div class="login-header df fd-c ai-c">
                <img src="../imgs/logo.png" alt="" style="width: 6rem" />
                <span class="f-mt-10">TFA认证</span>

                <el-form
                    ref="formRef"
                    :model="form"
                    :rules="rules"
                    class="f-mt-20 w100"
                    label-position="top"
                    @submit.prevent="onLogin"
                >
                    <el-form-item label="验证码" prop="code">
                        <el-input v-trim v-model="form.code" placeholder="请输入" maxlength="6" />
                    </el-form-item>
                    <div class="f-center" v-if="url">
                        <img :src="url" alt="" style="width: 18rem; height: 18rem" />
                    </div>
                    <button type="submit" class="el-button el-button--primary w100 f-mt-10">登录</button>
                </el-form>
            </div>
        </div>

        <div class="footer f-center df fd-c ai-c jc-c c777">
            <p>© 2019-2025 成都汇智云听</p>
            <p class="f-fs-12 f-mt-10">
                <span>川公网安备5101702002221号</span>
                <span class="f-ml-20">蜀ICP备2020035281号</span>
            </p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import api from '@/apis/base';
import type { Ilogin, IchangePWd, IUserId } from '@/types/baseMoudle';
import { getStore, setStore } from '@/utils/utils';
import type { FormInstance, FormRules } from 'element-plus';
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();

interface Ifrom {
    code: number | string;
}

const loading = ref(false);
const $router = useRouter();
const formRef = ref<FormInstance>();

const url = ref('');
const form = reactive<Ifrom>({
    code: '',
});
const query = ref<Ilogin>();

onMounted(() => {
    query.value = getStore('esign-admin-acount') as Ilogin;

    // 616需要二维码
    if (query.value.isTFA === 616) {
        getEWM();
    }
});

// 获取认证二维码
const getEWM = () => {
    if (!query.value) return;
    api.generatingverifyqrcode({
        loginAccount: query.value.loginAccount,
        loginPassword: query.value.loginPassword,
    }).then(res => {
        url.value = 'data:image/png;base64,' + res.data;
    });
};

// 授权登录
const onLogin = () => {
    formRef.value &&
        formRef.value.validate(async valid => {
            if (valid) {
                // 认证
                if (!query.value) return;
                loading.value = true;
                const relsut = await api.authbytfa({
                    loginAccount: query.value.loginAccount,
                    loginPassword: query.value.loginPassword,
                    code: form.code as number,
                });

                // 认证失败
                if (relsut.code === 618) {
                    loading.value = false;
                    form.code = '';
                    getEWM();
                    return;
                }

                // FTA认证后，去重置密码
                if (relsut.code === 617) {
                    setStore('esign-admin-acount', {
                        loginAccount: query.value.loginAccount,
                        loginPassword: query.value.loginPassword,
                        code: form.code,
                    });
                    $router.push('/change-pwd');
                }

                if (!relsut || relsut.code != 1) {
                    loading.value = false;
                    return;
                }
                // 成功
                loginHandle(relsut.data);
            }
        });
};

import usePermission from '@/hooks/usePermission';
const { getAllPermissionCodes } = usePermission();

//获取并保存权限信息
const loadPermissions = async () => {
    try {
        const permissionCodes = await getAllPermissionCodes();
        setStore('esign-admin-permissionCodes', permissionCodes);
    } catch {}
};

// 登录处理
const loginHandle = (data: any) => {
    const { access_Token } = data;
    userStore.setUserInfo(data);
    userStore.setToken(access_Token);
    //登录成功后加载权限信息
    loadPermissions();
    $router.push('/home');
};

const rules = reactive({
    code: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { pattern: /^\d{6}$/, message: '请输入6位数字验证码', trigger: 'blur' },
    ],
});
</script>

<style scoped lang="scss">
.login-box {
    background: url('../imgs/bg.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;

    .login-box-content {
        width: 50rem;
        padding: 8rem;
    }
}

:deep(.el-input__inner) {
    height: 4.6rem;
}

:deep(.el-button) {
    height: 4.6rem;
}

:deep(.el-form-item__label:before) {
    content: '' !important;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    color: #333333;
}
</style>
